<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>02-登录页.html</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      a {
        text-decoration: none;
      }

      #app {
        width: 90%;
        margin: 10px auto auto auto;
      }
      #app .close {
        width: 100%;
        font-size: 28px;
      }
      #app .pageTitle {
        margin: 50px 0px 40px 0px;
      }

      #app .user {
        height: 50px;
        border-bottom: 1px solid #e3e1de;
        display: flex;
        justify-content: space-between;
      }
      .user input {
        height: 45px;
        border: none;
        outline: none;
        flex: 1;
      }

      #app .password {
        height: 45px;
        border-bottom: 1px solid #e3e1de;
        display: flex;
        justify-content: space-between;
      }
      .password input {
        border: none;
        outline: none;
        flex: 1;
      }
      .password span:last-child {
        width: 15%;
        color: #e3e1de;
        line-height: 45px;
      }

      #app .loginBtn {
        width: 100%;
        height: 40px;
        border-radius: 20px;
        margin: 50px auto 10px auto;
      }
      .loginBtn input {
        display: block;
        width: 100%;
        height: 40px;
        border-radius: 20px;
        border: none;
        outline: none;
        background-color: #e3e1de;
      }

      #app .loginInfo {
        width: 100%;
        margin-bottom: 160px;
        display: flex;
        justify-content: space-between;
      }
      .loginInfo span {
        color: #0ea9e2;
      }

      #app .isAgree {
        width: 100%;
        height: 30px;
        font-size: 14px;
        padding-bottom: 70px;
      }
      .isAgree span:first-child {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: 1px solid #e3e1de;
        border-radius: 50%;
      }
      .isAgree span:nth-child(2) {
        color: #e3e1de;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="close"><span>X</span></div>
      <div class="pageTitle">
        <h1>密码登录</h1>
      </div>
      <div class="user">
        <input type="text" placeholder="手机/用户名" v-model="userName">
      </div>
      <div class="password">
        <input type="text" placeholder="密码" v-model="passwordInfo">
        <span>隐藏</span>
      </div>
      <div class="loginBtn">
        <input type="submit" value="登录" @click="login">
      </div>
      <div class="loginInfo">
        <span>手机号登录</span>
        <span>忘记密码</span>
      </div>
      <div class="isAgree">
        <p>
          <span></span>
          <span>已阅读并同意</span>
          <a href="#">《用户服务协议》</a>
          <a href="#">《隐私政策》</a>
        </p>
      </div>
    </div>

    <script src="./vue-2.5.21.js"></script>
    <script src="./02-登录页.js"></script>
  </body>
</html>
